<template>
  <div class="head-box">
    <el-row class="row" type="flex" justify="start">
    <el-col class="top-left" :span="10" :push="3">
      <span>您好，欢迎光临绿竹山庄官方商城！</span>
      <span v-if="flag1">登录</span>
      <span v-if="flag2">欢迎您&nbsp;&nbsp;：{{userName}}</span>
    </el-col>
    <el-col class="top-right" :span="6" :push="7">
      <span @click.prevent="changeorder">个人中心</span>
      <span>品牌官网</span>
      <span  @click.prevent="changeshopcar">购物车&nbsp;&nbsp;<i class="el-icon-shopping-cart-2"></i></span>
    </el-col>
    </el-row>
    <el-row class="login-body" type="flex" justify="center">
    <el-col class="logo" :span="4"><span>绿竹鞋庄</span></el-col>
    <el-col class="serch" :span="8" :offset="2" :pull="1"><el-input class="serch-input" placeholder="请输入要搜索的内容"></el-input>
    <el-button class="button" icon="el-icon-search">搜索</el-button></el-col>
    <el-col class="erweima" :span="4"><img src="../assets/img/login/erweima.jpg"></el-col>
    </el-row>
    <el-row class="login-nav" type="flex" justify="center">
      <span v-for="(item,index) in navs" :key="index" @click="changewindow(index)">{{item}}</span>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'head1',
  data () {
    return {
      navs: ['首页', '跑步', '篮球鞋', '男鞋', '女鞋', '儿童', '品牌'],
      userId: '',
      userName: '',
      flag1: true,
      flag2: false
    }
  },
  components: {

  },
  computed: {

  },
  methods: {
    getUserId () {
      this.userId = sessionStorage.getItem('user_id')
      this.userName = sessionStorage.getItem('user_name')
    },
    islogin () {
      if (this.userId == null) {
        this.$message({
          type: 'error',
          message: '请先登录'
        })
        this.$router.push('/')
        this.flag1 = true
        this.flag2 = false
      } else {
        this.flag1 = false
        this.flag2 = true
      }
    },
    changeshopcar () {
      this.$router.push('/shopcar')
    },
    changeorder () {
      this.$router.push('/homePage')
    },
    changewindow (index) {
      console.log(index)
      this.$router.push('/home')
    }
  },
  mounted () {
    this.getUserId()
    this.islogin()
  }
}
</script>

<style lang="scss">
  @import '../assets/style/common.scss';
  .head-box {
    background-color: #fff;
  }
  .row {
    height: 4.2%;
    line-height: 30px;
    vertical-align: middle;
    color: #000;
    background: #fafafa;
    .top-left {
      span {
        margin-left: 15px;
        font-size: 12px;
      }
    }
    .top-right {
      span {
        cursor: pointer;
        margin-left: 20px;
        font-size: 12px;
      }
    }
  }
  .login-body {
    height: 100px;
    line-height: 100px;
    vertical-align: middle;
    .logo{
      span {
        font-size: 24px;
        color: $red;
        &:before {
          content: '';
          width: 150px;
          height: 100px;
          background: url(../assets/img/login/timg1.jpg) no-repeat;
          display: inline-block;
          background-size: 100% 100%;
          vertical-align:middle;
          margin-right: 5px;
        }
      }
    }
    .serch {
      .serch-input {
        width: 400px;
        border-color: #B61D1D;
        font-size: 14px;
        color: #666;
        margin-bottom: 4px;
      }
      .button {
        background-color: #B61D1D;
        font-size: 16px;
        color: #fff;
        font-weight: bold;
        border: 0px;
      }
    }
    .erweima {
      img {
      display: inline-block;
      vertical-align: middle;
      }
    }
  }
  .login-nav {
    height: 39px;
    line-height: 39px;
    vertical-align: middle;
    width: 100%;
    background-color: #000;
    position: sticky;
    top: 0px;
    z-index: 999;
    span {
      color: #fff;
      width: 110px;
      text-align: center;
      &:hover {
        color: #B61D1D;
        background-color: #f3f3f3;
        cursor: pointer;
      }
    }
  }
</style>
